<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../day8/jquery-3.4.1.min.js"></script>
		<script>
		$(function(){
			var ispassok=false;
			$("#nick").blur(function(){
				var reg=/^[a-zA-Z][a-zA-Z0-9]{1,15}$/;
				if(!reg.test(this.value)){
					$(this).next().html("格式非法，只能由数字和字母构成，开头必须是字母，长度是2-16");
					return false;
				}
				$(this).next().text("√");
				return true;
			});
			$("#pass2").blur(function(){
				let p1=$("#pass").val();
				let p2=$(this).val();
				if(p1.length<6){
					$("#passTip").text("密码长度太短，不能少于6个!");
					ispassok=false;
					return false;
				}
				if(p1!=p2){
					$("#passTip").text("两次密码不一致!");
					ispassok=false;
					return false;
				}
				ispassok=true;
				$("#passTip").text("√!");
				return true;
			});
			$("form").submit(function(){
				//...找到选中了几个？
				var l=$(":checkbox[name=like]:checked").length;
				$("#liketip").html(l>=2?"√":"至少选择两个");
				$("#pass2").triggerHandler("blur");
				return ispassok && l>=2;
			});
		})
		</script>
	</head>
	<body>
		<form action="reg.html" method="post">
			<fieldset>
				<legend>基本信息</legend>
				<p>
					<!--只能由数字和字母构成，开头必须是字母，长度是2-16 -->
					<input autocomplete="off" type="text" placeholder="昵称" name="nickname" id="nick" value="" required="required" pattern="[a-zA-Z][a-zA-Z0-9]{1,15}"/><span style="color: red;"></span>
				</p>
				<p>
					<label for="name">姓名</label><input type="text" name="name" id="name" value="" required="required" pattern=".{2,20}"/>
				</p>
				<p>
					爱好(至少选择两个):
					<input type="checkbox" name="like" value="sing" />唱歌
					<input type="checkbox" name="like" value="dance" />跳舞
					<input type="checkbox" name="like" value="game" />游戏
					<input type="checkbox" name="like" value="study" checked />学习
					<span id="liketip"></span>
				</p>
				<p>
					<input type="password" name="pass" id="pass" placeholder="密码" required="required">
					<input type="password" name="pass2" id="pass2" placeholder="确认密码" >
					<span id="passTip" style="color: red;"></span>
				</p>
				<input placeholder="手机号" type="tel" name="phone" pattern="1\d{10}" required="required"/>
			</fieldset>
			<p>
				<input type="submit" value="注册" />
			</p>
		</form>
	</body>
</html>
